
<template>
  <div>
    <!--搜索框-->
    <el-form ref="userFormRef" :model="userForm" :inline="true" size="small">
      <el-form-item label="用户名">
        <el-input v-model="userForm.userName" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="userForm.nickName" />
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="userForm.roleId" placeholder="请选择角色">
          <el-option
            v-for="item in roleDropListOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="userForm.status" placeholder="请选择状态">
          <el-option
            v-for="item in userForm.statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectList">查询</el-button>

        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <!--表单-->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      size="small"
    >
      <!--表单展示--->
      <el-table-column prop="userName" label="用户账号" />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="roleName" label="角色" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 1">禁用</el-tag>
        </template>
      </el-table-column>
      <!--表单操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--编辑-->
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i
              class="el-icon-edit operationIcon"
              @click="edit(scope.row.userId)"
            ></i>
          </el-tooltip>

          <!--删除-->
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i
              class="el-icon-delete operationIcon"
              v-if="!scope.row.hasChild"
              @click="deleteRow(scope.row.userId)"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--分页操作-->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="pageSizes"
      :total="total"
      :current-page.sync="pageNo"
      :page-size.sync="pageSize"
      @current-change="selectList"
      @size-change="selectList"
    />
    <!--新增用户弹窗-->
    <el-dialog
      title="新增用户"
      :visible.sync="addUserDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        ref="addUserFormRef"
        :model="addUserForm"
        :rules="addUserFormRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="用户账号" prop="userName">
          <el-input
            v-model="addUserForm.userName"
            type="userName"
            placeholder="请填写用户账号"
          />
        </el-form-item>

        <el-form-item label="角色">
          <el-select v-model="addUserForm.roleId" placeholder="请选择角色">
            <el-option
              v-for="item in roleDropListOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="昵称" prop="nickName">
          <el-input
            v-model="addUserForm.nickName"
            type="nickName"
            placeholder="请填写昵称"
          />
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="addUserForm.mobile"
            type="mobile"
            placeholder="请填写手机号"
          />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="addUserForm.password"
            type="password"
            placeholder="请填写密码"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="addUserForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in addUserFormData.statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="addResetUserForm()">取消</el-button>
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="addUserSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>

    <!--编辑用户弹窗-->
    <el-dialog
      title="编辑用户"
      :visible.sync="editUserDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <el-form
        ref="editUserFormRef"
        :model="editUserForm"
        :rules="editUserFormRules"
        size="small"
        label-width="100px"
      >
        <el-form-item label="用户账号" prop="userName">
          <el-input
            v-model="editUserForm.userName"
            type="userName"
            placeholder="请填写用户账号"
          />
        </el-form-item>

        <el-form-item label="角色">
          <el-select v-model="editUserForm.roleId" placeholder="请选择角色">
            <el-option
              v-for="item in roleDropListOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="昵称" prop="nickName">
          <el-input
            v-model="editUserForm.nickName"
            type="nickName"
            placeholder="请填写昵称"
          />
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="editUserForm.mobile"
            type="mobile"
            placeholder="请填写手机号"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="editUserForm.status" placeholder="请选择状态">
            <el-option
              v-for="item in editUserFormData.statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="editResetUserForm()">取消</el-button>
        <el-button
          v-loading="btnLoad"
          size="medium"
          type="primary"
          @click="editUserSubmit"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addUser, userList, viewUser, editUser, deleteUser } from "@/api/user";
import { roleDropList } from "@/api/drop";

export default {
  data() {
    return {
      userForm: {
        userName: "",
        nickName: "",
        status: -1,
        roleId: -1,
        statusOptions: [
          {
            value: -1,
            label: "请选择",
          },
          {
            value: 0,
            label: "正常",
          },
          {
            value: 1,
            label: "禁用",
          },
        ],
        pageSize: 1,
        pageNum: 10,
      },
      tableData: [],
      roleDropListOptions: [],
      //新增弹窗逻辑
      addUserDialog: false,
      addUserForm: {
        userName: "",
        nickName: "",
        mobile: "",
        password: "",
        status: 0,
        roleId: -1,
      },
      //添加弹窗数据源存放
      addUserFormData: {
        statusOptions: [
          {
            value: 0,
            label: "正常",
          },
          {
            value: 1,
            label: "禁用",
          },
        ],
      },
      addUserFormRules: {
        userName: [{ required: true, trigger: "blur" }],
        nickName: [{ required: true, trigger: "blur" }],
        mobile: [{ required: true, trigger: "blur" }],
        password: [{ required: true, trigger: "blur" }],
        status: [{ required: true, trigger: "blur" }],
      },
      //编辑弹窗逻辑
      editUserDialog: false,
      editUserForm: {
        userId: 0,
        userName: "",
        nickName: "",
        mobile: "",
        status: 0,
        roleId: -1,
      },
      //编辑弹窗数据源存放
      editUserFormData: {
        statusOptions: [
          {
            value: 0,
            label: "正常",
          },
          {
            value: 1,
            label: "禁用",
          },
        ],
      },
      editUserFormRules: {
        userName: [{ required: true, trigger: "blur" }],
        nickName: [{ required: true, trigger: "blur" }],
        mobile: [{ required: true, trigger: "blur" }],
        password: [{ required: true, trigger: "blur" }],
        status: [{ required: true, trigger: "blur" }],
      },
      btnLoad: false,
      loading: false,
      pageSizes: [5, 10, 20, 30, 50],
      pageSize: 10,
      pageNo: 1,
      total: 0,
    };
  },
  mounted() {
    this.selectList();
    this.selectRoleDropList();
  },
  methods: {
    //初始化角色信息
    selectRoleDropList() {
      roleDropList()
        .then((response) => {
          this.roleDropListOptions = response.data.rows;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 初始化数据
    selectList() {
      this.loading = true;
      this.tableData = [];
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        userName: this.userForm.userName,
        nickName: this.userForm.nickName,
        status: this.userForm.status,
        roleId:this.userForm.roleId
      };
      userList(params)
        .then((response) => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //新增逻辑
    add() {
      this.addUserDialog = true;
    },
    // 新增重置表单
    addResetUserForm() {
      this.addUserForm = {
        userName: "",
        nickName: "",
        mobile: "",
        password: "",
        status: 0,
        roleId: -1,
      };
      this.addUserDialog = false;
    },
    // 提交用户新增或编辑请求
    addUserSubmit() {
      this.$refs.addUserFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          // 新增用户
          addUser(this.addUserForm)
            .then((response) => {
              this.btnLoad = false;
              this.addResetUserForm();
              this.selectList();
            })
            .catch((res) => {
              this.btnLoad = false;
              this.addResetUserForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑逻辑
    edit(id) {
      this.editUserDialog = true;
      viewUser(id)
        .then((response) => {
          this.editUserForm = response.data;
        })
        .catch(() => {});
    },
    // 编辑重置表单
    editResetUserForm() {
      this.editUserForm = {
        userId: 0,
        userName: "",
        nickName: "",
        mobile: "",
        status: 0,
        roleId: -1,
      };
      this.editUserDialog = false;
    },
    // 提交用户编辑请求
    editUserSubmit() {
      this.$refs.editUserFormRef.validate((valid) => {
        if (valid) {
          this.btnLoad = true;
          // 新增用户
          editUser(this.editUserForm)
            .then((response) => {
              this.btnLoad = false;
              this.editResetUserForm();
              this.selectList();
            })
            .catch((res) => {
              this.btnLoad = false;
              this.editResetUserForm();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    deleteRow(id) {
      this.$confirm(`确定要删除该用户么？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(id)
            .then((resp) => {
              this.selectList();
            })
            .catch((err) => {
            });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.operationIcon {
  margin-left: 10px;
}
</style>
